<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全球地震实时监控地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部信息栏 -->
        <div class="header">
            <div class="header-content">
                <h1 class="title">
                    <span class="icon">🌍</span>
                    全球地震实时监控
                </h1>
                <div class="stats">
                    <div class="stat-item">
                        <span class="stat-label">24小时内地震数量</span>
                        <span class="stat-value" id="earthquake-count">加载中...</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">最大震级</span>
                        <span class="stat-value" id="max-magnitude">-</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">最后更新</span>
                        <span class="stat-value" id="last-update">-</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 地图容器 -->
        <div class="map-container">
            <div id="map"></div>
            
            <!-- 图例 -->
            <div class="legend">
                <h3>震级图例</h3>
                <div class="legend-items">
                    <div class="legend-item">
                        <div class="legend-circle magnitude-1"></div>
                        <span>1.0 - 2.9</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle magnitude-2"></div>
                        <span>3.0 - 3.9</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle magnitude-3"></div>
                        <span>4.0 - 4.9</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle magnitude-4"></div>
                        <span>5.0 - 5.9</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle magnitude-5"></div>
                        <span>6.0 - 6.9</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle magnitude-6"></div>
                        <span>7.0+</span>
                    </div>
                </div>
            </div>

            <!-- 加载指示器 -->
            <div class="loading" id="loading">
                <div class="loading-spinner"></div>
                <span>正在加载地震数据...</span>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="controls">
            <button class="control-btn" id="refresh-btn">
                <span class="btn-icon">🔄</span>
                刷新数据
            </button>
            <button class="control-btn" id="auto-refresh-btn">
                <span class="btn-icon">⏰</span>
                自动刷新: 关闭
            </button>
            <select class="control-select" id="magnitude-filter">
                <option value="all">所有震级</option>
                <option value="significant">显著地震 (4.5+)</option>
                <option value="major">重大地震 (6.0+)</option>
            </select>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="app.js"></script>
</body>
</html>